<div class="content-wrapper" [@routerTransition]>
    <sub-header idName="Administration.Menus" [title]="'Menus' | localize" [description]="'MenusHeaderInfo' | localize">
        <div role="actions">
            <button (click)="synchorization()"  
                *ngIf="dataSynchronous && (['Pages.Tenant.Menus.Create','Pages.Tenant.Menus.Edit'] | permissionAll)"
                class="btn btn-primary blue mr-1" type="button" >
                <i class="bi bi-stickies"></i>{{"ManualSynchorization" |localize}}
            </button>
            <button (click)="batchRoute()" *ngIf="'Pages.Tenant.Menus.Create' | permission"
                class="btn btn-primary blue mr-1" type="button" >
                <i class="bi bi-signpost"></i> {{"CreateCustomRoute" | localize}}
            </button>
            <button (click)="resetMenusCache()" 
                class="btn btn-primary blue mr-1" type="button">
                <i class="bi bi-arrow-repeat"></i> {{"RefreshMenusCache" | localize}}
            </button>
            <button (click)="resetRouteCache()" 
                class="btn btn-primary blue mr-1" type="button">
                <i class="bi bi-arrow-repeat"></i> {{"RefreshRouteCache" | localize}}
            </button>
            <button (click)="cleanMenusData()" [hidden]="true" *ngIf="'Pages.Tenant.Menus.CleanData' | permission"
                class="btn btn-primary blue mr-1" type="button">
                <i class="bi bi-diagram-3"></i> {{"CleanData" | localize}}
            </button>
            <button (click)="resetCode()" *ngIf="'Pages.Tenant.Menus.ResetUnitCode' | permission"
                class="btn btn-primary blue" type="button">
                <i class="bi bi-arrow-repeat"></i> {{"ResetUnitCode" | localize}}
            </button>
        </div>
    </sub-header>
    <section class="content d-flex flex-column flex-column-fluid">
        <div [class]="containerClass"  [busyIf]="saving">
            <div class="row">
                <div class="col-6">
                    <menu-tree #menuTree (addMenu)="addingMenu($event)" (editMenu)="editMenu($event)" ></menu-tree>
                </div>
                <div class="col-6">
                    <addMenu #addMenu  (menuCreated)="menuCreated($event)" (menuUpdated)="menuUpdated($event)"></addMenu>
                </div>
            </div>
        </div>
    </section>
</div>
<sync-menus-modal #syncMenus (callback)="reload()"></sync-menus-modal>
